<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .operationNav {
    width: 20%;
    height: 100vh;
    background-color: rgb(250, 250, 250);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .operationTitle {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 550;
    color: rgb(0, 43, 136);
    margin-bottom: 30px;
  }

  .operationLinkBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .operationLink {
    /*设置超出部分文本不换行*/
    white-space: nowrap;
    /*隐藏超出文本*/
    overflow: hidden;
    /*超出文本用...显示*/
    text-overflow: ellipsis;
    height: 3vh;
    width: 11vw;
  }

  .operationButton {
    width: 50%;
    margin-bottom: 20px;
    padding: 5px;
    background-color: rgb(0, 43, 136);
    color: rgb(210, 210, 210);
    border: rgb(0, 43, 136) solid 1px;
    border-radius: 8px;
  }

  .operationButton:hover {
    background-color: rgb(210, 210, 210);
    color: rgb(0, 43, 136);
    border: rgb(0, 43, 136) solid 1px;
  }
</style>
